<template>
	<view class="memory-create">
		
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">公告编辑</view>
		</view>

		<view style="margin-top: 20rpx ;padding-bottom: 160rpx;">
			<Editor v-model="post.content" />
		</view>
		
		<view class="footer">
			
			<view v-if="!post.id" class="footer-item" style="width: 150rpx;" @click="createOrUpdatePost(1)">
				<view
					style="height: 70rpx;width: 70rpx;background-color: #F2F2F2;border-radius: 50%;display: flex;flex-direction: row;justify-content: center;align-items: center;">
					<uni-icons type="folder-add" size="25" color="#A6A6A6"></uni-icons>
				</view>
				<view style="font-size: 24rpx;color: #A6A6A6;margin-top: 10rpx;">存草稿</view>
			</view>
			
			
			<view class="footer-item">
				<view class="footer-button" @click="createOrUpdatePost(0)">
					{{post.id ? '更新创作' : '完成创作'}}
				</view>
			</view>
			
			
			
			<view class="footer-item">
				<view class="footer-visibility" @click="changeVisialbe()">
					<view style="color: #5DACB1;font-weight: bold;">可见性 : {{visibilityChooses[post.visibility]}}</view>
					<uni-icons style="margin-left: 5rpx;" type="bottom" size="15" color="#5DACB1">
					</uni-icons>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import UploadOss from '@/common/util/UploadOss'
	import Editor from '@/components/editor-wrapper/v2/editor'
	export default {
		components: {
			Editor
		},
		onLoad(options) {
			if (options.islandId) {
				this.post.islandId = options.islandId
				this.getPostDraftInfo()
			}
			
			if (options.postId) {
				this.post.id = options.postId
				this.getPostEditInfo()
			}
		},
		data() {
			return {
				post: {
					content: "",
					visibility:2,
					type: 2,
					isDraft: 0
				},
				visibilityChooses:["仅自己可见","仅关注可见","开放"]
			}
		},
		methods: {
			getPostDraftInfo() {
				this.$api.getPostDraftInfo({
					islandId: this.post.islandId
				}).then((res) => {
					if (res.data != null) {
						this.post = res.data
					}
				});
			},
			getPostEditInfo() {
				this.$api.getPostEditInfo({
					id: this.post.id
				}).then((res) => {
					this.post = res.data
				});
			},
			createOrUpdatePost(isDraft) {
				this.post.isDraft = isDraft
				if (this.post.id) {
					this.$api.updatePost(this.post)
						.then((res) => {
							uni.showToast({
								icon: 'success',
								title: "保存成功",
								duration: 500
							})
							uni.navigateBack()
						});
				} else {
					this.$api.createPost(this.post)
						.then((res) => {
							uni.showToast({
								icon: 'success',
								title: "保存成功",
								duration: 500
							})
							uni.navigateBack()
						});
				}
			
			},
			changeVisialbe(){
				this.post.visibility = (this.post.visibility+1)%3
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.memory-create {

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			top: 0;
			position: sticky;
		
			padding: 20rpx 0;
			
			padding-top: 120rpx;
			
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		
			background-color: white;
			border-bottom: solid thin #efefef;
			z-index: 100;
		
		
			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}
		
		
		}

		
		.footer {
			position: fixed;
			background-color: #ffffff;
			height: 130rpx;
			width: 100%;
			bottom: 0;
			z-index: 100;
			border-top: solid thin #e7e7e7;
		
			display: flex;
			flex-direction: row;
			align-items: center;
		
			.footer-item {
				width: 200rpx;
				margin-left: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
		
				.text {
					font-size: 32rpx;
					font-weight: bold;
		
				}
				
				.footer-visibility{
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
				}
		
				.footer-button {
					padding: 0 30rpx;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #5DACB1;
					border-radius: 50rpx;
					color: white;
				}
			}
		}
	}

	.emptyWarn {
		text-align: center;
		background-color: #d1d1d1;
		padding: 30rpx;
		width: 450rpx;
		border-radius: 70rpx;
		position: fixed;
		bottom: 150rpx;
		left: 150rpx;
	}



	.tag-area {
		display: flex;
		flex-direction: row;
		
		.tag{
			height: 40rpx;
			width: 40rpx;
			border: solid thin gray;
			border-radius: 10rpx;
			margin-left: 30rpx;
			
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

	}
</style>
